<template>
  <div class="mobile-app">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="智能助手"
      fixed
      safe-area-inset-top
    />
    
    <!-- 内容区域 -->
    <main class="content">
      <!-- 轮播图 -->
      <van-swipe class="swipe-container" :autoplay="3000">
        <van-swipe-item>
          <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" class="swipe-img" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" class="swipe-img" />
        </van-swipe-item>
      </van-swipe>

      <!-- 功能列表 -->
      <van-cell-group inset>
        <van-cell 
          title="人脸识别解锁" 
          is-link 
          icon="user-o"
          @click="showFeature('face')"
        />
        <van-cell
          title="智能对话模式"
          is-link
          icon="comment-o"
          @click="showFeature('chat')"
        />
        <van-cell
          title="系统设置"
          is-link
          icon="setting-o"
          @click="showFeature('settings')"
        />
      </van-cell-group>
    </main>

    <!-- 底部导航 -->
    <van-tabbar v-model="activeTab" fixed>
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o">功能</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  NavBar, 
  Swipe, SwipeItem,
  Tabbar, TabbarItem,
  Cell, CellGroup,
  Icon
} from 'vant';

const activeTab = ref(0);

const showFeature = (type) => {
  console.log('打开功能:', type);
  // 实际开发中这里可以添加路由跳转
};
</script>

<style lang="scss" scoped>
.mobile-app {
  max-width: 500px;
  margin: 0 auto;
  padding-bottom: 50px; // 给底部导航留出空间

  .content {
    padding: 46px 12px 0; // 适配顶部导航栏高度
    
    .swipe-container {
      border-radius: 8px;
      overflow: hidden;
      
      .swipe-img {
        width: 100%;
        height: 180px;
        object-fit: cover;
      }
    }
    
    .van-cell-group {
      margin-top: 16px;
      
      :deep(.van-cell) {
        padding: 14px 16px;
        
        .van-icon {
          font-size: 18px;
        }
      }
    }
  }
}
</style>
